<template>
  <div style="margin:1px 3px">
    <div>{{item.condition + item.stitle}}</div>
    <van-circle style="margin-left:30vw" size="130px" v-model.number="item.completedata[2][3]" :rate="item.completedata[2][1]" :clockwise="false" layer-color="rgb(245, 245, 245)">
      <template #default>
        <span style="color:rgb(110, 110, 110)" v-html="'<br><br>'+item.completedata[2][0]+'<br>'"></span>
        <span style="font-size:20px" v-html="item.completedata[2][1] + '%' "></span>
      </template>
    </van-circle>
    <van-row style="margin-top:7px">
      <van-col v-for="(coldata,index) in item.completedata" v-show="index !== 2" :key="index" class="itemcol" span="12">
        <span style="font-size:12px">{{coldata[0]}}</span><br>
        <span style="color:green;font-size:20px">{{coldata[1]}}</span>
        <span style="color:green;font-size:12px">{{coldata[2]}}</span>
      </van-col>
    </van-row>
    <van-row>
      <van-col class="headcol" span="4">{{measure[0]}}</van-col>
      <van-col class="headcol" span="6">{{measure[1]}}</van-col>
      <van-col class="headcol" span="8">{{measure[2]}}</van-col>
      <van-col class="headcol" span="6">{{measure[3]}}</van-col>
    </van-row>
    <van-row v-for="(rowdata,index) in finalList" :key="index">
      <van-col class="centercol" span="4">{{rowdata[0]}}</van-col>
      <van-col class="centercol" span="6">{{rowdata[1]}}</van-col>
      <van-col class="centercol" span="8">{{rowdata[2]}}</van-col>
      <van-col class="centercol" span="6">{{rowdata[3]}}</van-col>
    </van-row>
    <!--<table border="1" cellpadding="0" cellspacing="0" style="width:100vw">
      <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
      </tr>
      <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
      </tr>
      <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
      </tr>
    </table>-->
  </div>
</template>

<script>
import Vue from 'vue'
import { Col, Row, Toast, Circle } from 'vant'
import qs from 'qs'
Vue.use(Col).use(Row).use(Circle).use(Toast)
export default {
  name: 'showcomplete',
  data () {
    return {
      item: this.$route.query.item,
      currentdep: this.$route.query.currentdep,
      measure: [],
      finalList: []
    }
  },
  created: function () {
    let data = { itemid: this.item.itemid, currentdep: this.currentdep }
    this.axios({
      method: 'post',
      url: '/api/completedata.getmonthdata.do',
      data: qs.stringify(data)
    }).then(res => {
      //console.log(res)
      this.measure = res.data.measure
      this.finalList = res.data.finalList
    }).catch(res => {
      this.reserror(res)
    })
  }
}
</script>

<style>
  .home {
    padding-top: 8vh;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .centercol {
    text-align:center;
    border: rgb(194, 217, 218) 1px solid;
    font-family: 微软雅黑;
    height: 6vh;
    line-height:6vh;
  }
  .itemcol {
    height: 9vh;
    text-align:center;
  }
  .headcol {
    text-align:center;
    border: rgb(194, 217, 218) 1px solid;
    font-family: 微软雅黑;
    height: 6vh;
    background-color: #DADEEA;
    line-height:6vh;
  }
</style>
